<template>
  <div>
    <myheader/>
    <van-tabs v-model="active">
      <van-tab title="用户名登录">
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit" @click='login'>提交</van-button>
        </div>

      </van-tab>
      <van-tab title="手机号登录">

        <van-form @submit="onSubmit">
          <van-field
            v-model="mobile"
            name="mobile"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-button type="primary" @click='sendSms'>发送验证码</van-button>
          <van-field
            v-model="code"
            name="code"
            label="验证码"
            placeholder="验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" @click='mlogin'>提交</van-button>
          </div>
        </van-form>
      </van-tab>

    </van-tabs>
  </div>

</template>

<script>
import myheader from "../components/myheader";
// import dragVerify from "vue-drag-verify";

export default {
  name: "login",
  data() {
    return {
      active: 1,
      username: '',
      password: '',
      mobile: '',
      code: '',
      onSubmit: ''
    }
  },
  methods: {
    login() {
      this.$axios.post('users/zdl', {'username': this.username, 'password': this.password})
        .then(res => {
          if (res.data.code == 200) {
            localStorage.setItem('token',res.data.token)
            alert(res.data.mes)
          } else {
            alert(res.data.mes)
          }
        })
    },
    mlogin() {
      this.$axios.post('users/mdl', {'mobile': this.mobile, 'code': this.code})
        .then(res => {
          if (res.data.code == 200) {
            alert(res.data.mes)
          } else {
            alert(res.data.mes)
          }
        })
    },
    //发送验证码
    sendSms() {
      this.$axios.post('users/sendsms', {'mobile': this.mobile}).then(res => {
        if (res.data.code == 200) {
          alert('发送成功')
        } else {
          alert(res.data.mes)
        }
      })
    }
  },
  mounted() {
  },
  components: {
    'myheader': myheader,
  },
}
</script>

<style scoped>

</style>